@import 'px2rem.scss';
$designWidth: 750;
body {
  position: relative;
  width: px2rem(750);
  margin: 0 auto;
  background: #f3ecd1 url(../img/body-bg11.jpg) repeat;
  background-size: cover;
}
.container {
  width: 100%;
}
.container .person {
  overflow: hidden;
  width: px2rem(685);
  height: px2rem(433);
  margin: 0 auto px2rem(20);
  padding: px2rem(30) 0 0 0;
}

#chenlongJpg {
  height: px2rem(400);
}
#chenlongGif {
  height: px2rem(400);
}

.text-cont {
  width: px2rem(720);
  height: px2rem(107);
  margin: 0 auto px2rem(25);
  background: url(../img/text.png) no-repeat;
  background-size: cover;
  font: px2rem(26)/px2rem(32) 'simhei';
  color: #fff6d1;
  text-align: center;
}
.text-cont .text {
  padding: px2rem(20) px2rem(80);
}
.text-cont .num {
  font-size: px2rem(30);
  color: #ffdd54;
}

.text-cont .time {
  float: left;
  width: px2rem(150);
  height: px2rem(70);
  margin-left: px2rem(50);
  padding: 0 0 0 px2rem(45);
  background: url(../img/text-time-icon.png) no-repeat 0 50%;
  font: px2rem(38)/px2rem(70) 'simhei';
  color: #ebe5ca;
}
.text-cont .time .time-num {
  float: left;
  margin-right: px2rem(5);
  font: px2rem(54)/px2rem(70) 'Arial';
  color: #fff229;
}
.text-cont .num-list {
  float: right;
  width: px2rem(260);
  margin-right: px2rem(40);
  font: px2rem(38)/px2rem(70) 'simhei';
}
.text-cont .num-list span {
  float: left;
}
.text-cont .num-list .num-bg {
  width: px2rem(50);
  height: px2rem(71);
  margin-right: px2rem(3);
  background: url(../img/text-num-bg.png) no-repeat;
  background-size: cover;
  font: px2rem(64)/px2rem(70) 'Arial';
  color: #fff228;
  text-align: center;
}

.duang-cont {
  position: relative;
  width: px2rem(600);
  margin: 0 auto;
  margin-top: px2rem(60);
}

.record {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  height: px2rem(50);
  margin-top: -px2rem(5);
  font: px2rem(26)/px2rem(50) 'simhei';
  color: #141f31;
  text-decoration: underline;
}

.btn-duang {
  display: block;
  width: px2rem(500);
  height: px2rem(356);
  margin: 0 auto;
  background: url(../img/btn-duang.png) no-repeat;
  background-size: cover;
  -webkit-user-select: none;
          user-select: none;

  -webkit-touch-callout: none;
          touch-callout: none;
}
.btn-duang .duang {
  position: relative;
  width: 100%;
  height: 100%;
}
.duang-cont .hand {
  position: absolute;
  top: px2rem(220);
  right: px2rem(40);
  width: px2rem(221);
  height: px2rem(235);
  background: url(../img/hand.png) no-repeat;
  background-size: cover;
}
.footer {
  position: fixed;
  bottom: 0;
  display: inline-block;
  width: px2rem(750);
  height: px2rem(132);
  background: url(../img/btn-bottom.png) no-repeat;
  background-size: 100% px2rem(132);
  font-size: 0;
}

.footer .btn {
  display: inline-block;
  width: 33%;
  padding-top: px2rem(20);
  font: px2rem(40)/px2rem(100) 'simhei';
  color: #e7ddb5;
}

@media (max-width: 640px) {
  .duang-cont {
    margin-top: 30px;
  }
  .duang-cont .hand {
    display: none;
  }
}
